// 引入变量文件
@import"def";
$--color-white: #fff;
$--color-info: #909399 !default;

//一级字体
$--color-primary: #4e6d9d;

// 基础背景色
$--color-background-base: #ecf1f5;
$--color-background-white: #fff;
$--color-info-lighter: mix($--color-white, $--color-info, 90%) !default;

html,body{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-size: 16px;
}
th{
  font-weight: normal;
}
ul{
  padding-inline-start: 0;
}
li{ list-style: none;}

#app{
  height: 100%;
}
//滚动条
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
  width: 8px;
  height: 8px;
  background-color: #F5F5F5;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 10px;
  background-color: #F5F5F5;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #5e5e5e;
}

//字体
.header-main-font-size{
  font-size: 1.6rem;
}
.header-font-size{
  font-size: 1.25rem;
}
.text-font-size{
  font-size: 1rem;
}
.text-small-font-size{
  font-size: 0.9rem;
}
.text-secondary-font-size{
  font-size: 0.8rem;
}

//颜色-中性色-文字
.text-main-color{
  color: #303133;
}
.text-normal-color{
  color: #606266;
}
.text-secondary-color{
  color: #909399;
}
.text-placeholder-color{
  color: #C0C4CC
}

@font-face {
  font-family: NotoSansHans-Light;
  src: url("./font/NotoSansHans-Light.otf");
}

.no-padding{
  padding: 0;
}

.my-breadcrumb{
  float: left;
  padding-left: 20px;
}

.my-breadcrumb-div{
  text-align: left;
  display: flex;
  align-items: center;
}

.my-breadcrumb-icon{
  padding-right: 10px;
}

.my-breadcrumb-padding{
  display: inline-block;
  padding-top: 10px;
  padding-bottom: 10px;
}

//.el-footer{
//  height: 65px !important;
//}

.main-div{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 20px;
}

.main-div-nopadding{
  padding: 0;
}

.main-div-padding{
  box-sizing: border-box;
  height: calc(100% - 40px);
}

.card-div{
  box-sizing: border-box;
  padding-bottom: 20px;
}

.card-row, .card-col{
  height: 100%;
}

// card标题样式
.card-title{
  font-family: NotoSansHans-Light;
  text-align: left;
  margin-bottom: 15px;
  position: relative;
  padding-left: 15px;
  font-weight: bold;
  color: $--color-brand;
  //color: rgb(42, 50, 65);
  &::before{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background-color: $--color-brand;
  }
}

.card-header-div{
  font-family: NotoSansHans-Light;
  //float: left;
  font-size: 20px;
  font-weight: bold;
  line-height: 20px;
  text-align: left;
  position: relative;
  padding-left: 15px;
  color: $--color-brand;
}

.card-header-div::before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background-color: $--color-brand;
}

// 旧的card-content，下个版本弃用
.card-content{
  height: 100%;
  padding-top: 30px;
  box-sizing: border-box;
  text-align: left;
}

// 新的card-contain
.card-contain{
  height: calc(100% - 35px);
  text-align: left;
  position: relative;
}

.padding-bottom-col{
  box-sizing: border-box;
  padding-bottom: 20px;
}

.background-color-base{
  background-color: $--color-background-base;
}

.background-color-white{
  background-color: $--color-background-white
}

.background-color-info{
  text-align: left;
  width: 100%;
  padding: 0 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 40px;
  line-height: 40px;
  background-color: $--color-info-lighter;
  border-radius: 6px;
}
.custom-tree-node{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 8px;
}

.el-main-padding{
  padding: 0 20px;
}

.el-main-scroll-y{
  overflow-y: scroll;
}

.margin-bottom-row{
  margin-bottom: 20px;
}

.aside-header-div{
  box-sizing: border-box;
  width: 100%;
  height: 60px;
  margin-top: 15px;
  padding: 15px 0;
  font-size: 20px;
  color: #fff;
  background-color: #5e88c2;
  float: left;
  text-align: left;
  padding-left: 50px;
}

.aside-tree-div{
  width: 100%;
  height: calc(100% - 80px);
  //padding-top: 81px;
  box-sizing: border-box;
  overflow-y: auto;
}

.button-form-item{
  text-align: right;
}

.demo-ruleform{
  text-align: left;
}

.tree-node-img{
  width: 1em;
}

.select-width-100{
  width: 100%;
}
.input-select-width{
  width: 15rem;
}

.select-width-mini{
  width: 193px;
}

.aside-menu{
  .is-active{
    background-color: #eaf0f3;
  }
}

.center-station-button{
  margin-bottom: 10px;
}

.el-dialog{
  border-radius: 8px;
}

.no-margin-bottom{
  margin-bottom: 0;
}

.mini-append{
  .el-input-group__append{
    padding: 0 10px;
  }
}

.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}
.my-table-cell-lineheight18{
  line-height: 18px !important;
}

.form-item-half-width{
  width: 50%;
  display: inline-block;
  margin-right: 0 !important;
}
.form-item-33-width{
  width: 33%;
  display: inline-block;
  margin-right: 0 !important;
}

.button-switch{
  padding: 0 0 0 5px;
  img{
    height: 20px;
  }
}

.pagination-position{
  margin-top: 15px;
}

.remote-dialog{
  .el-dialog__header{
    padding-top: 10px;
  }
  .el-dialog__body{
    padding-top: 0;
  }
}

// 字体大小设置
.font-size-el{
  font-size: $--font-size-el; // 主标题
}
.font-size-l{
  font-size: $--font-size-l; // 标题
}
.font-size-m{
  font-size: $--font-size-m; // 小标题
}
.font-size-base{
  font-size: $--font-size-base; // 正文
}
.font-size-s{
  font-size: $--font-size-s; // 正文（小）
}
.font-size-es{
  font-size: $--font-size-es; // 辅助文字
}

// 行高
.line-height-none{
  line-height: $--line-height-none; // 无
}
.line-height-compact{
  line-height: $--line-height-compact; // 紧凑
}
.line-height-base{
  line-height: $--line-height-base; // 常规
}
.line-height-Loose{
  line-height: $--line-height-Loose; // 宽松
}

.form-tree-content{
  margin-top: 30px;
  display: flex;
  flex-flow: row nowrap;
  align-content: center;
  .form-tree-content-form{
    flex: 0 0 300px;
    border-radius: 6px;
  }
  .form-tree-content-tree{
    margin-left: 20px;
    flex: 1 0 350px;
    border-radius: 6px;
  }
}
